<template>
  <view class="container">
    <up-sticky bgColor="#fff" customNavHeight="0">
      <view class="header flex items-center">
        <up-search placeholder="搜索昵称/手机号/姓名" v-model="searchForm.keyword" :show-action="false" @clear="handleSearch" @search="handleSearch"></up-search>
        <f-filter-popup :value="searchForm.search" @confirm="handleFilterChange"></f-filter-popup>
      </view>
      <u-tabs :current="current" :list="tabs" keyName="title" @change="handleTabChange"></u-tabs>
    </up-sticky>
    <view class="content">
      <f-list ref="listRef" :request="getData">
        <template #default="{item, index}">
          <com-customer-item :item="item" @edit="handleEdit(item, index)" @editStatus="handleEditStatus(item, index)"></com-customer-item>
        </template>
      </f-list>
    </view>
    <f-tabbar :current="2"></f-tabbar>
    <com-edit-popup ref="editRef" @confirm="handleEditConfirm"></com-edit-popup>
    <com-edit-status-popup ref="editStatusRef" @confirm="handleEditStatusConfirm"></com-edit-status-popup>
  </view>


</template>

<script lang="ts" setup>

import { computed, ref } from 'vue'
import { getAdminCustomerListApi, updateAdminCustomerApi, updateAdminCustomerStatusApi } from '@/addon/htscrm/api';
import FFilterPopup from '@/addon/htscrm/components/f-filter-popup/index.vue'
import FTabbar from '@/addon/htscrm/components/f-tabbar/index.vue';
import FList from '@/addon/htscrm/components/f-list/index.vue';
import ComCustomerItem from './com-customer-item.vue';
import ComEditPopup from './com-edit-popup.vue';
import ComEditStatusPopup from './com-edit-status-popup.vue';
import { onLoad } from '@dcloudio/uni-app';

const searchForm = ref<any>({
  keyword: '',
  current_tab: 0,
  search: {}
})

const listRef = ref()
const editRef = ref()
const editStatusRef = ref()

const tabs = ref<any[]>([
  { title: '全部', id: 0 },
  { title: '从未看课', id: 1 },
  { title: '今日新增', id: 2 },
  { title: '今日未看', id: 3 },
  { title: '今日完播', id: 4 },
]); 

const current = computed({
  get() {
    if (searchForm.value.current_tab === 0) return 0
    return tabs.value.findIndex(item => item.id === searchForm.value.current_tab)
  },
  set(val) {
    searchForm.value.current_tab = tabs.value[val].id
  }
})


async function getData(meta: any) {
  const params = {
    ...searchForm.value,
    ...meta
  }
  // params.search = JSON.stringify(params.search)
  const res = await getAdminCustomerListApi(params)
  if (res.code == 1) {
    return res.data
  }
}

/**
 * 筛选
 * @param value 
 */
function handleFilterChange(value:any) {
  if(!value) return 
  searchForm.value.search = value
  listRef.value?.reload();
}
/**
 * 搜索
 */
function handleSearch() {
  listRef.value?.reload();
}
/**
 * 切换标签
 * @param val 
 */
function handleTabChange(val:any) {
  current.value = val.index
  listRef.value?.reload();
}

const editIndex = ref(-1)
/**
 * 编辑
 * @param item 
 * @param index 
 */
function handleEdit(item:any, index:number) {
  editRef.value?.open(item)
  editIndex.value = index
}

async function handleEditConfirm(e:any) {
  await updateAdminCustomerApi(e)
  uni.showToast({title:'编辑成功',	icon:'none'});
  handleSearch()
}
/**
 * 编辑
 * @param item 
 * @param index 
 */
function handleEditStatus(item:any, index:number) {
  editStatusRef.value?.open(item)
  editIndex.value = index
}

async function handleEditStatusConfirm(e:any) {
  await updateAdminCustomerStatusApi(e)
  uni.showToast({title:'审核成功',	icon:'none'});
  handleSearch()
}

onLoad((opt:any) => {
  if(opt.status) {
    searchForm.value.search.status = Number(opt.status) 
  }
})

</script>
<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f6f7f8;

  .header {
    padding: 30rpx 30rpx 0 ;
  }

}
</style>